<template>
	<view style="height: 100%;">
		<view class="main">
			<view class="up">
				<image mode="aspectFill" src="/static/image/home.jpg" />
			</view>
		<!-- <image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view> -->
			<view class="down">
				<view class="menu">
					<view @tap="toAnnounce" class="item">
						<view class="item-inner">
							<view class="img">
								<image src="../../static/image/index_health.png"></image>
							</view>
							<view class="title">上班打卡</view>
						</view>
					</view>
					<view class="item" @click="toApplyHistory">
						<view class="item-inner">
							<view class="img">
								<image src="../../static/image/index_health.png"></image>
							</view>
							<view class="title">请假历史</view>
						</view>
					</view>
					<view class="item" @click="toPassword">
						<view class="item-inner">
							<view class="img">
								<image src="../../static/image/index_covid.png"></image>
							</view>
							<view class="title">密码修改</view>
						</view>
					</view>
					<view class="item" @click="toApply">
						<view class="item-inner">
							<view class="img">
								<image src="../../static/image/index_trip.png"></image>
							</view>
							<view class="title">出行报备</view>
						</view>
					</view>
					<view class="item" @click="toPersonInfo">
						<view class="item-inner">
							<view class="img">
								<image src="../../static/image/index_enroll.png"></image>
							</view>
							<view class="title">个人信息维护</view>
						</view>
					</view>
					<view class="item" @click="toHealth">
						<view class="item-inner">
							<view class="img">
								<image src="../../static/image/index_statistic.png"></image>
							</view>
							<view class="title">健康上报</view>
						</view>
					</view>
					<view class="item" @click="toHealthHistory">
						<view class="item-inner">
							<view class="img">
								<image src="../../static/image/index_statistic.png"></image>
							</view>
							<view class="title">健康历史</view>
						</view>
					</view>
					<view class="item" @click="toProject">
						<view class="item-inner">
							<view class="img">
								<image src="../../static/image/index_statistic.png"></image>
							</view>
							<view class="title">项目信息</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	//const pageHelper = require('../../../../../helper/page_helper.js');
	//const cloudHelper = require('@helper/cloud_helper.js');
	// const ProjectBiz = require('../../../biz/project_biz.js');
	export default {
		data() {
			return {
				dataList:'',
				title: 'Hello'
			}
		},
		onLoad() {

		},
		onShow() {
			console.log('Index page show')
		},
		onPullDownRefresh() {
			console.log('页面下拉刷新')
		},
		methods: {
			toAnnounce(){
				uni.switchTab({
					url:'/pages/announce/announce'
				});
			},
			toApply(){
				uni.navigateTo({
					url:'/pages/apply/apply'
				})
			},
			toApplyHistory(){
				uni.navigateTo({
					url:'/pages/applyhistory/applyhistory'
				})
			},
			toPassword(){
				uni.navigateTo({
					url:'/pages/passwordpage/passwordpage'
				})
			},
			toPersonInfo(){
				uni.navigateTo({
					url:'/pages/personinfo/personinfo'
				})
			},
			toHealth(){
				uni.navigateTo({
					url:'/pages/health/health'
				})
			},
			toHealthHistory(){
				uni.navigateTo({
					url:'/pages/healthhistory/healthhistory'
				})
			},
			toProject(){
				uni.navigateTo({
					url:'/pages/project/project'
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	.main {
		padding: 0rpx 0rpx 100rpx;
	}
	.up {
	    width: 100%;
	}
	.up image {
	    width: 100%;
	    height: 400rpx;
	    border-bottom-left-radius: 20rpx;
	    border-bottom-right-radius: 20rpx;
	}
	.notice {
	    width: 100%;
	    padding: 10rpx 15rpx;
	    font-size: 28rpx;
	}
	.notice .inner {
	    text-align: left;
	    width: 100%;
	    padding: 20rpx 30rpx;
	    background-color: #f8f8f8;
	    border-radius: 15rpx;
	}
	.down {
	    width: 100%;
	    box-sizing: border-box;
	    padding: 0rpx;
	}
	
	.menu {
	    width: 100%;
	    display: flex;
	    flex-wrap: wrap;
	    background-color: #fff;
	    padding: 20rpx 10rpx;
	}
	
	.menu .item {
	    width: 33.3%;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	}
	
	.menu .item .item-inner {
	    width: 100%;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    justify-content: center;
	    background-color: #e9faff;
	    border-radius: 10rpx;
	    width: 230rpx;
	    height: 230rpx;
	    margin-bottom: 15rpx;
	}
	
	.menu .item-inner .img {
	    display: flex;
	    justify-content: center;
	    align-items: center;
	}
	
	.menu .item-inner .img image {
	    width: 80rpx;
	    height: 80rpx;
	}
	
	.menu .item-inner .title {
	    margin-top: 20rpx;
	    font-size: 32rpx;
	    color: #000;
	}
	
	.home-list-box {
	    width: 100%;
	    margin-bottom: 200rpx;
	    margin-top: 20rpx;
	}
	
	.home-list-box .comm-list-box {
	    padding: 20rpx 0rpx 30rpx 0rpx;
	    overflow: unset;
	}
</style>
